<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" ref="dataForm">
      <el-form-item>
        <el-select v-model="dataForm.memberStatus" placeholder="请选择会员状态">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.memberExpireType" placeholder="请选择过期类型">
          <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.grade" placeholder="请选择会员身份">
          <el-option
            v-for="item in useroption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.title" placeholder="职位">
          <el-option
            v-for="item in position"
            :key="item.val"
            :label="item.label"
            :value="item.val"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.userId" placeholder="uid"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="userId" header-align="center" align="center" label="uid"></el-table-column>
      <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
      <el-table-column prop="avatar" header-align="center" align="center" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width:40px;height:40px;" />
        </template>
      </el-table-column>
      <el-table-column prop="phone" header-align="center" align="center" label="手机号" width="150"></el-table-column>
      <el-table-column prop="wxNumber" header-align="center" align="center" label="微信号" width="150"></el-table-column>
      <el-table-column prop="wxQrcode" header-align="center" align="center" label="二维码">
        <template slot-scope="scope">
          <img style="width:50px;" :src="scope.row.codeImg" alt />
        </template>
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        header-align="center"
        align="center"
        label="注册时间"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="lastLoginAt"
        header-align="center"
        align="center"
        label="最后登录时间"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="memberStartTime"
        header-align="center"
        align="center"
        label="会员购买时间"
        width="160"
      ></el-table-column>
      <el-table-column prop="memberStatus" header-align="center" align="center" label="会员状态">
        <template slot-scope="scope">
          <span :class="{red: scope.row.memberStatus==0 }">{{scope.row.memberStatus==0 ?'已过期':'进行中 '}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberStatus" header-align="center" align="center" label="过期类型">
        <template slot-scope="scope">
          <span v-if="scope.row.memberStatus==0" style="color: red;">{{scope.row.memberExpireType==1 ?'正常过期':'退款过期 '}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="memberEndTime"
        header-align="center"
        align="center"
        label="会员到期日"
        width="160"
      ></el-table-column>
      <el-table-column prop="grade" header-align="center" align="center" label="会员身份">
        <template slot-scope="scope">
          {{scope.row.grade==1 ?'会员':''}}
          {{scope.row.grade==2 ?'经理':''}}
          {{scope.row.grade==3 ?'总监':''}}
        </template>
      </el-table-column>
      <el-table-column prop="title" header-align="center" align="center" label="职位">
        <template slot-scope="scope">
          <span>{{ scope.row.title === 0 ? '班长(正常分销) ' : '' }}</span>
          <span>{{ scope.row.title === 1 ? '班主任' : '' }}</span>
          <span>{{ scope.row.title === 2 ? '班长(禁止分销)' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stewardshipNickName" header-align="center" align="center" label="管家昵称"></el-table-column>
      <el-table-column prop="stewardshipNickPhone" header-align="center" align="center" label="管家手机号"></el-table-column>
      <el-table-column prop="totalCredit" header-align="center" align="center" label="学分"></el-table-column>
      <el-table-column prop="totalLove" header-align="center" align="center" label="爱心值"></el-table-column>
      <el-table-column prop="isForbidden" header-align="center" align="center" label="登录状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isForbidden"
            :active-value="1"
            :inactive-value="0"
            @change="changeSwitch(scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.userId)">查看</el-button>
          <el-button v-if="scope.row.memberStatus!=0" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <detail-view v-if="detailViewVisible" ref="detailView"></detail-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./appuser-add-or-update";
import DetailView from "./appuser-detail-view";
import QRCode from "qrcode";
export default {
  data() {
    return {
      status: [
        {
          value: null,
          label: "全部"
        },
        {
          value: '0',
          label: "已过期"
        },
        {
          value: '1',
          label: "进行中"
        },
      ],
      // 会员状态
      options: [],
      // 会员身份
      useroption: [
        {
          value: "1",
          label: "会员"
        },
        {
          value: "2",
          label: "经理"
        },
        {
          value: "3",
          label: "总监"
        }
      ],
      //职位
      position: [
        {
          val: null,
          label: "全部"
        },
        {
          val: "0",
          label: "班长(正常分销)"
        },
        {
          val: "1",
          label: "班主任"
        },
        {
          val: "2",
          label: "班长(禁止分销)"
        },
      ],
      dataForm: {
        phone: "",
        isMember: "",
        grade: "",
        userId: "",
        nickname: "",
        title:'',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      detailViewVisible: false,
      wxQrcode: "",
      codeImg: ""
    };
  },
  components: {
    AddOrUpdate,
    DetailView
  },
  activated() {
    this.getDataList();
    this.getuserType()
  },
  methods: {
    cellStyle({row, column, rowIndex, columnIndex}) {
      if(row.memberState==0) {
        return 'color: #999'
      }
    },
    search() {
      this.pageIndex = 1
      this.getDataList()
    },
    // 获取数据列表
    showQRcode() {
      let codeUrl = this.wxQrcode;
      var opts = {
        errorCorrectionLevel: "H",
        type: "image/jpeg",
        rendererOpts: {
          quality: 0.3
        }
      };
      QRCode.toDataURL(codeUrl, opts, (err, url) => {
        this.codeImg = url;
      });
    },
    getuserType() {
      this.$http({
        url: this.$http.adornUrl("/user/appuser/getMemberExpirationType"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options = data.data
        }
      });
    },
    getDataList() {
      this.dataListLoading = true;
      let obj = {
        page: this.pageIndex,
        limit: this.pageSize,
        key: this.dataForm.key
      };
      if (this.dataForm.memberStatus) {
        obj.memberStatus = this.dataForm.memberStatus;
      }
      if (this.dataForm.memberExpireType) {
        obj.memberExpireType = this.dataForm.memberExpireType;
      }
      if (this.dataForm.grade) {
        obj.grade = this.dataForm.grade;
      }
      if (this.dataForm.userId) {
        obj.userId = this.dataForm.userId + "";
        console.log(typeof obj.userId);
      }
      if (this.dataForm.nickname) {
        obj.nickname = this.dataForm.nickname;
      }
      if (this.dataForm.phone) {
        obj.phone = this.dataForm.phone;
      }
      if(this.dataForm.title){
         obj.title = this.dataForm.title;
      }
      this.$http({
        url: this.$http.adornUrl("/user/appuser/memberList"),
        method: "get",
        params: this.$http.adornParams(obj)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$refs["dataForm"].resetFields();
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
          var len = data.page.list.length;
          for (let i = 0; i < len; i++) {
            let codeUrl = this.dataList[i].wxQrcode || "";
            var opts = {
              errorCorrectionLevel: "H",
              type: "image/jpeg",
              rendererOpts: {
                quality: 0.3
              }
            };
            console.log("this.dataList[i].wxQrcode--->", codeUrl);
            QRCode.toDataURL(codeUrl, opts, (err, url) => {
              this.dataList[i].codeImg = url;
            });
          }
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(userId) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(userId);
      });
    },
    // 查看
    detail(userId) {
      this.detailViewVisible = true;
      this.$nextTick(() => {
        this.$refs.detailView.init(userId);
      });
    },
    changeSwitch(id) {
      this.dataForm.id = id;
      // console.log(this.dataForm.id);
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(
            `/user/appuser/isForbidden/${this.dataForm.id}`
          ),
          method: "get",
          params: this.$http.adornParams()
        })
          .then(({ data }) => {
            if (data.code == 500) {
              this.$message.error(data.msg);
            }
            this.getDataList();
          })
          .catch(e => {
            this.$message.error(data.msg);
          });
      }
    }
  }
};
</script>
<style>
  .red{
    color: red;
  }
</style>
